<template>
	<view class="content">
		<view class="login">
			<view class="title">
				登录
			</view>
			<u-form labelPosition="left" :model="userInfo" ref="uForm" labelWidth='80'>
				<u-form-item label="用户名" borderBottom>
					<u-input v-model="userInfo.userName" border="none" placeholder="请输入用户名"></u-input>
				</u-form-item>
				<u-form-item label="密码" borderBottom>
					<view class="" style="display: flex;">
						<u-input v-model="userInfo.password" border="none" placeholder="请输入密码"
							:password="hiddenPsd"></u-input>
						<u-icon :name="suffixIcon" class="psd-icon" @click="handlePsdIconClick" size="22"></u-icon>
					</view>

				</u-form-item>

			</u-form>
			<view class="btn">
				<u-button @click="submit" type="success">登录</u-button>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		getCountStatus
	} from "../../common/api"
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				hiddenPsd: true,
				userInfo: {
					userName: "admin",
					password: "admin"
				}
			}
		},
		computed: {
			suffixIcon() {
				return this.hiddenPsd ? "eye-off" : "eye";
			},
		},
		onLoad() {

		},
		methods: {
			...mapMutations([
				'changeUserName'
			]),
			handlePsdIconClick() {
				this.hiddenPsd = !this.hiddenPsd;
			},
			submit() {
				// uni.switchTab({
				// 	url: '/pages/cableManage/cableManage'
				// })
				// return
				getCountStatus(this.userInfo).then((res) => {
					if (res.success) {
						uni.setStorageSync('satoken', res.data.satoken);
						uni.$u.toast(res.message)
						this.changeUserName(this.userInfo.userName)
						uni.switchTab({
							url: '/pages/cableManage/cableManage'
						})
					} else {

					}

				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #356464;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;

		.login {
			background-color: white;
			width: 70%;
			// height: 800rpx;
			border-radius: 20rpx;
			padding: 40rpx 30rpx 80rpx 30rpx;

			.title {
				text-align: center;
				font-size: 46rpx;
				margin-bottom: 20rpx;
			}

			.btn {
				margin-top: 40rpx;
			}
		}
	}
</style>